import React, { Component } from 'react'
import { NavBar, SearchBar, Icon } from 'antd-mobile';
import Img from './Img'

import '../assets/styles/header.less'

export default class Header extends Component {

    ttype() {
        if (this.props.type === 'navbar') {
            return (
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                    rightContent={[
                        <div key='0' style={{ width: '28px' }}></div>
                    ]}
                ><Img src='logo.png' key='0' className='header'></Img></NavBar>
            )
        } else {
            if (!this.props.isFooter) {
                return (
                    <NavBar leftContent={[
                        <Img src='logo.png' key='0' className='header'></Img>
                    ]}>
                    </NavBar>
                )
            } else if (this.props.isFooter) {
                return (
                    <div style={{ width: '100%', textAlign: 'center' }}><Img src='logo.png' key='0' className='header'></Img></div>
                )
            } else {
                return (
                    <SearchBar placeholder="搜索咯" maxLength={8} />
                )
            }
        }
    }
    render() {
        return (
            <div className='headerbox'>
                <NavBar
                    
                    className='navbar'
                    mode="dark"
                    leftContent={[
                        <Img key='0' src="logo.png"></Img>
                    ]}
                    rightContent={[
                        <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                        <Icon key="1" type="ellipsis" />,
                    ]}
                ></NavBar>

            </div>
        )
    }
}
